---
import { type ImageMetadata } from 'astro'
import { Image } from 'astro:assets'

import type { iconsType } from 'astro-pure/types'
import { Icon } from 'astro-pure/user'
import { cn } from 'astro-pure/utils'

interface Props {
  class?: string
  methods: {
    name: string
    icon: string
    image: ImageMetadata
  }[]
}

const { class: className, methods, ...props } = Astro.props
---

<div class={cn('flex flex-col justify-center gap-4 sm:flex-row', className)} {...props}>
  {
    methods.map((item) => (
      <div class='sponsorship-card relative justify-center overflow-hidden rounded-xl border bg-white'>
        <div class='sponsorship-card-icon absolute bottom-0 end-0 start-0 top-0 flex items-center justify-center transition-opacity'>
          <Icon class='size-20' name={item.icon as iconsType} />
        </div>
        <Image
          class='sponsorship-card-img mx-auto my-0 max-w-60 blur-sm transition-opacity'
          src={item.image}
          alt={item.name}
          loading='lazy'
        />
      </div>
    ))
  }
</div>

<style>
  .sponsorship-card {
    & .sponsorship-card-img {
      opacity: 0.3;
      --un-blur: blur(4px);
      filter: var(--un-blur);
    }

    &:hover {
      & .sponsorship-card-icon {
        opacity: 0;
      }
      & .sponsorship-card-img {
        opacity: 1;
        --un-blur: blur(0);
      }
    }
  }
</style>
